<template>
    <div class="box_cont">
        <div class="test_cont flex_center_center" v-loading="loading">
            <p class="title">答题分析</p>
            <p class="text">{{ exercise && exercise.log ? exercise.log.rightRate : 0 }}<span class="font36">%</span> </p>
            <p class="font20">正确率</p>
            <div class="flex_center_between">
                <div class="time_box flex_center_center">
                    <p class="font20 label">答题时间</p>
                    <p class="themeFont font-26">{{ exercise && exercise.log ? formatDate(exercise.log.submitTime) : '' }}</p>
                </div>
                <div class="time_box flex_center_center">
                    <p class="font20 label">答题用时</p>
                    <p class="themeFont font-26">{{ exercise ? exercise.useTime : '' }}</p>
                </div>
            </div>

            <div class="card_box flex_center_center">
                <p class="font24">答题卡</p>
                <p class="font18 text2" v-if="exercise && exercise.articleLimit">本次文章还可以做{{ exercise.surplusCount }}次</p>
                <div class="item_cont flex_center" style="justify-content: center" v-if="exercise && exercise.log">
                    <div class="item flex_c_c font24" v-for="(item, index) in exercise.log.answer" :class="item.mark.isRight == 1 ? 'green' : 'red'" :key="index">{{ index + 1 }}</div>
                </div>
            </div>

            <div class="btn_cont">
                <el-button class="cur" style="width:18.4rem;padding: 1.1rem 3.2rem;" type="warning" @click="showAnswer">
                    <div class="flex_c_c font14 cur"> <img class="icon" src="@/assets/img/print_2.png" /> 查看答案</div>
                </el-button>
                <el-button class="cur" style="width:18.4rem;padding: 1.1rem 3.2rem;" type="primary" @click="restart">
                   <div class="flex_c_c font14 cur"> <img class="icon" src="@/assets/img/next_1.png" /> 重新开始</div>
                </el-button>
                <el-button class="cur" style="width:18.4rem;padding: 1.1rem 3.2rem;" type="primary" v-if="exercise && exercise.nextArticle" @click="nextRead">
                    <div class="flex_c_c font14 cur"> <img class="icon" src="@/assets/img/next_1.png" /> 下一关</div> 
                </el-button>
            </div>
           
        </div>
    </div>
</template>

<script>
import { exerciseInfo } from '@/api/articleExercise.js'
export default {
    data() {
        return {
            loading: false,
            exerciseId: '',
            userId: 0,
            exercise: {},
        }
    },
    mounted(){
        this.exerciseId = this.$route.query.exerciseId || 0
        this.userId = this.$route.query.userId || 0
        this.getExercise()
    },
    methods:{
        getExercise() {
            this.loading = true
            exerciseInfo({id: this.exerciseId, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.exercise = res.data
                    let useTime = res.data ? res.data.useTime : 0
                    this.exercise.useTime = this.formatUseTime(useTime)
                }
            }).finally(() => {
                this.loading = false
            })
        },
        // 查看答案
        showAnswer() {
            let articleId = this.exercise.log.article.id || 0
            if (articleId) {
                let path = '/aireading/answer?exerciseId=' + this.exerciseId + '&articleId=' + articleId
                if (this.userId) {
                    path += '&userId=' + this.userId
                }
                this.$router.push(path)
            }
        },
        // 重新开始
        restart() {
            if (this.exercise.articleLimit && !this.exercise.surplusCount) {
                this.$message.error('本次文章答题次数已用完')
                return
            }
            let articleId = this.exercise.log.article.id || 0
            if (articleId) {
                let path = '/aireading/info?exerciseId=' + this.exerciseId + '&articleId=' + articleId
                if (this.userId) {
                    path += '&userId=' + this.userId
                }
                this.$router.push(path)
            }
        },
        // 下一关
        nextRead() {
            let articleId = this.exercise.nextArticle.id || 0
            if (articleId) {
                let path = '/aireading/info?exerciseId=' + this.exerciseId + '&articleId=' + articleId 
                if (this.userId) {
                    path += '&userId=' + this.userId
                }
                this.$router.push(path)
            }
        },
        // 将time转换成时分秒
        formatUseTime(useTime) {
            if (useTime) {
                let hour = parseInt(useTime / 3600)
                let min = parseInt((useTime - hour * 3600) / 60)
                let sec = parseInt(useTime - hour * 3600 - min * 60)
                if (hour < 10) {
                    hour = '0' + hour
                }
                if (min < 10) {
                    min = '0' + min
                }
                if (sec < 10) {
                    sec = '0' + sec
                }
                useTime = hour + '：' + min + '：' + sec
            }
            return useTime
        },
        formatDate(time) {
            if (time) {
                let createdTime = time.split('-')
                time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
            }
            return time
        },
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.test_cont{
    width: 100%;
    height: 100%;
    .title{
        font-size: 3.2rem;
        color: #1A1A1A;
    }
    .text{
        font-size: 9rem;
        color: #F69B2C;
        margin-top: 4rem;
    }
    
    
}
.time_box{
    width: 25rem;
    margin-top: 4rem;
    .label{color: #626780;margin-bottom: 2rem;}
}
.card_box{
    width: 70%;
    background: #F7F8FA;
    border-radius: 10px;
    padding: 3rem 0;
    margin-top: 4rem;
    .text2{margin-top: 1rem;}
    .item_cont{
        width: 60%;
        margin-top: 2rem;
        flex-wrap: wrap;
        .item{
            width: 6rem;
            height: 6rem;
            border-radius: 50%;
            color: #fff;
            margin-right: 5rem;
            margin-bottom: 1rem;
            &:last-child {
                margin-right: 0;
            }
        }
        .green{background: #19C14B;}
        .red{background: #FF5252;}
    }
}
.btn_cont{
    margin-top: 4rem;
    .icon{
        width: 3rem;
        height: 3rem;
        margin-right: 1rem;
    }
}
</style>
